﻿<template>
  <div class="input-container bg-color10 border input-hover rounded-sm pr-1">
    <input :id="elId"
           class="form-control op-input"
           type="text"
           autocomplete="off"
           :placeholder="placeholder"
           v-bind:value="value"
           @input="input"/>
    <i class="input-search flex-shrink-0 fa fa-search mr-2"></i>
  </div>
</template>

<script>
let IdCount = 0;

export default {
  name: "dialog-input-search",
  data: function () {
    IdCount++;
    return {
      elId: "dialogInputSearch" + IdCount
    };
  },
  props: {
    value: [String, Number],
    label: String,
    placeholder: String,
    isDebounce: {
      type: Boolean,
      default: true
    },
  },
  mounted() {
  },
  methods: {
    debounceInput: (function (event) {
      this.$emit('input', event.target.value);
    }),
    input(event) {
      if (this.isDebounce) {
        this.debounceInput(event);
      } else {
        this.$emit('input', event.target.value);
      }
    },
  },
};
</script>

<style scoped>
  .input-container {
    display: flex;
    align-items: center;
  }

  .input-container .form-control {
    flex-grow: 1;
    border: unset;
  }
</style>
